<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS 简介</title>
    <script>

        /* 浏览器会解释并执行为瑜<script>*/
        /*  Js 改变HTML 的内容 */
        function changeImage() {
            element = document.getElementById("bulb")
            if (element.src.match("bulbon")){
                element.src = "../images/eg_bulboff.gif"
            }else {
                element.src = "../images/eg_bulbon.gif"
            }
        }

        /* 修改了html 元素的样式 */
        function myFunction() {
            pElement = document.getElementById("demo")
            pElement.style.color = "#ff0000"
        }

        /*  验证输入的内容 */
        function validInputText() {
            var input = document.getElementById("inputValid")
            var value = input.value
            if (value == ""){
                alert("输入为空!请重新输入")
            }else  if (isNaN(value)){
                alert("请输入数字")
            }else {
                alert("输入格式正确")
            }

        }

    </script>
</head>
<body>
    <!--  灯泡 -->
    <h1>我的第一段JavaScript</h1>
    <img id="bulb" src="../images/eg_bulboff.gif" onclick="changeImage()"/>
    <p>点击灯泡来点亮或者熄灭这盏灯</p>

    <!-- Js 改变元素的 -->
    <p id="demo">
        JavaScript 能改变 HTML 元素的样式。
    </p>
    <button type="button" onclick="myFunction()">点击这里</button>
    <!--  Js 校验输入的内容 -->
    <h1>我的第三段 JavaScript</h1>
    <p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>

    <!-- 校验输入的文本 -->
    <input id="inputValid" type="text">
    <button type="button" onclick="validInputText()">点击这里校验输入的文字</button>
    <!--  修改 innerHTML  -->

</body>
</html>